<template>
	<div class="navbar-box">
		<van-nav-bar>
			<template #left>
				<img src="../../assets/images/logo.png" alt="logo" @click="goHome">
			</template>

			<template #right>
				<div class="right-box">
					<div class="search">
						<van-icon name="search" size="22" color="#ccc" />
					</div>
					<div class="face" @click="togo">
						<img v-lazy="avatar" alt="logo" v-if="avatar">
						<img src="../../assets/images/default_img.jpg" v-else >
					</div>
					<div class="open-app-btn">下载APP</div>
				</div>
			</template>
		</van-nav-bar>
	</div>
</template>

<script>
	import { getUserInfo } from '@/api'
	export default {
		data() {
			return {
				avatar: ''
			}
		},
		created() {
			this._getUserAvatar()
		},
		methods: {
			// 获取用户头像
			_getUserAvatar() {
				const id = window.localStorage.getItem('id')
				// 判断是否登录
				if (!id) return
				// 发送请求
				getUserInfo(id)
				.then(({data: res}) => {
					console.log('获取用户头像',res[0].user_img)
					this.avatar = res[0].user_img
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 路由跳转
			togo() {
				// 获取token
				const tokenStr = window.localStorage.getItem('token')
				// 判断是否有token
				if (!tokenStr) return this.$router.push({name:'Login'})
				// 跳转
				const path = this.$route.path
				if (path === '/edit') return
				this.$router.push({name:'Edit'})
			},
			goHome() {
				const path = this.$route.path
				if (path === '/') return
				this.$router.push({name:'Home'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar-box{
		/deep/ .van-nav-bar{
			.van-nav-bar__content{
				height: 45px;
				.van-nav-bar__left{
					padding: 0;
					padding-left: 4px;
					justify-content: center;
					img {
						height: 40px;
					}
				}
				.van-nav-bar__right{
					padding: 0;
					padding-right: 12px;
					.right-box{
						display: flex;
						align-items: center;
						justify-content: center;
						.search {
							margin-right: 24px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.face{
							width: 24px;
							height: 24px;
							img {
								width: 100%;
								height: 100%;
								border-radius: 12px;
							}
						}
						.open-app-btn{
							width: 72px;
							height: 24px;
							line-height: 24px;
							background-color: #fb7299;
							color: #fff;
							font-size: 12px;
							margin-left: 20px;
							border-radius: 3px;
						}
					}
				}
			}
		}
	}
</style>
